import React, { Component } from 'react';
import './tab.scss'
import { HomeFilled, AppstoreFilled, ShopFilled, ShoppingCartOutlined, UserOutlined } from '@ant-design/icons'
// import { TabBar } from 'antd-mobile';
import { withRouter, NavLink } from 'react-router-dom';
class Tab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {
                    path: '/index/home',
                    title: '首页',
                    icon: <HomeFilled />
                },
                {
                    path: '/index/cate',
                    title: '分类',
                    icon: <AppstoreFilled />
                },
                {
                    path: '/index/all',
                    title: '全部商品',
                    icon: <ShopFilled />
                },
                {
                    path: '/index/car',
                    title: '购物车',
                    icon: <ShoppingCartOutlined />
                },
                {
                    path: '/index/mine',
                    title: '个人中心',
                    icon: <UserOutlined />
                }
            ]
        }
    }
    render() {
        return (
            <div >
                {

                    <div className="tab">
                        <NavLink to={'/index/home'} activeClassName="active">
                            <HomeFilled />
                            <span>首页</span>
                        </NavLink>
                        <NavLink to={'/index/cate'} activeClassName="active">
                            <AppstoreFilled />
                            <span>分类</span>
                        </NavLink>
                        <NavLink to={'/index/all'} activeClassName="active">
                            <ShopFilled />
                            <span>全部商品</span>
                        </NavLink>
                        <NavLink to={'/index/car'} activeClassName="active">
                            <ShoppingCartOutlined />
                            <span>购物车</span>
                        </NavLink>
                        <NavLink to={'/index/mine'} activeClassName="active">
                            <UserOutlined />
                            <span>我的</span>
                        </NavLink>
                    </div>

                    // onChange是关键函数，获取点击元素的下表
                    // <TabBar onChange={this.handclick}>
                    //     {this.state.tabs.map((item, index) => (
                    //         <TabBar.Item key={index} icon={item.icon} title={item.title} />
                    //     ))}
                    // </TabBar>
                }

            </div>
        );
    }
    // handclick = (item) => {
    //     this.props.history.push(this.state.tabs[item].path)
    // }
}
// 使用withRouter高阶组件解决不在路由规则中的组件，不能用编程式跳路由的问题
export default withRouter(Tab);